import React from 'react'
import {
    Button,
    Table,
    Form,
    Input,
    Avatar,
    Modal,
    List,
    Collapse,
    Select,
    Col,
    DatePicker,
    Popconfirm,
    Icon
} from 'antd';
import { connect } from 'dva';
import CommentModal from './CommentModal';

import './Comment.scss';
import { themeList } from '../../../services/information';
const Panel = Collapse.Panel;
const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker;
let timeout;
let currentValue;

function fetch(value, callback) {
    if (timeout) {
        clearTimeout(timeout);
        timeout = null;
    }
    currentValue = value;

    function fake() {
        themeList({index:1,page_size:10,key:value}).then((res)=>{
            if (currentValue === value) {
                let data = res.data.data.list;
                let typeId = [];

                if (data.length > 0){
                    data.map((item,index)=>{
                        typeId[index] = {
                            text: item.theme_name,
                            value: item.theme_id,
                        }
                    })

                    callback(typeId);
                }

            }



        });

    }

    timeout = setTimeout(fake, 300);
}

@connect(({ themecomment }) => ({
    themecomment: themecomment
}))
@connect(({ video }) => ({
    video,
}))
@Form.create()




export default class ThemeComment extends React.PureComponent {

    constructor(props) {
        super(props);

        this.state = {
            typeList: [],
            sortInfo: {
                field:'',
                order:'',
            },
            data: [],
            value: undefined,

        }

    }

    componentDidMount() {
        this.props.dispatch({
            type: 'themecomment/getAllComment',
            data: {
                index: 1,
                page_size: 10
            }
        })

    }


    handleSearch = (value) => {
        fetch(value, data => this.setState({ data }));
    }

    handleChange = (value) => {
        this.setState({ value });
    }


    search = () => {
        const { dispatch, form } = this.props;
        let sorter = this.state.sortInfo;
        form.validateFieldsAndScroll((err, values) => {

            this.props.dispatch({
                type: 'themecomment/getAllComment',
                data: {
                    index: 1,
                    page_size: 10,
                    information_title: values.information_title,
                    comment_content: values.comment_content,
                    start: values.time ? values.time[0] ? values.time[0].format('YYYY-MM-DD') + " 00:00:00" : '' : '',
                    end: values.time ? values.time[1] ? values.time[1].format('YYYY-MM-DD') + " 23:59:59" : '' : '',
                    status: values.status ? values.status : '',
                    theme_id: values.theme_id ? values.theme_id : '',
                    sortField: sorter.field ? sorter.field : '',
                    sortOrder: sorter.order ? sorter.order : '',


                }
            })
        });
    }

    comment_delete = (e) => {

        e.preventDefault();
    }

    handleTableChange = (paginations, filters, sorter) => {
        const { pagination } = this.props.themecomment;

        let sortField = sorter.field ? sorter.field : '';
        let sortOrder = sorter.order ? sorter.order : '';
        this.setState({
            sortInfo: {
                field:sortField,
                order:sortOrder,
            }
        });

        let p = { ...pagination, index: paginations.current, page_size: paginations.pageSize,sortFiled:sortField,sortOrder:sortOrder };
        this.props.dispatch({
            type: 'themecomment/getAllComment',
            data: p
        })

        // this.search();

    }

    /**
     *  审批 删除 上下架
     */
    onSelectChange = (selectedRowKeys, data) => {
        // console.log(selectedRowKeys, data);
        let ids = [];
        data.forEach((item) => {
            ids.push(item.comment_id)
        })
        console.log(ids,'ids11');


        this.props.dispatch({
            type: 'themecomment/setSelectedPlateIds',
            data: {
                ids: ids,
                list: data
            }
        })
        this.props.dispatch({ type: 'themecomment/updateMoreDeal', data: selectedRowKeys });
    }


    render() {


        const columns = [{
            width:120,
            title: '会员名称',
            dataIndex: 'member_nickname',
            key: 'member_nickname',

        }, {
            width:60,
            title: '头像',
            dataIndex: 'head_pic',
            key: 'head_pic',
            render: (text) => {
                if (text) {
                    return <Avatar src={text} />
                } else {
                    return <Avatar icon="user" />
                }
            }
        }, {
            width:200,
            title: '评论内容',
            dataIndex: 'filter_comment_content',
            key: 'filter_comment_content',
            className:'comment-content',
            render: (text) => {
                return <div dangerouslySetInnerHTML={{ __html: text}}></div>
            }
        }, {

            title: '文章标题',
            dataIndex: 'information_title',
            key: 'information_title',
            render: (text, record) => {
                return <a onClick={() => {
                    this.props.dispatch({
                        type: 'themecomment/showModal',
                        payload: {
                            information_id: record.information_id,
                        }
                    })
                }}>{text}</a>
            }
        }, {
            width:190,
            title: '评论时间',
            dataIndex: 'create_time',
            key: 'create_time',
            sorter: true,

        }, {
            width:90,
            title: '点赞',
            dataIndex: 'like_count',
            key: 'like_count',
            sorter: true,
        }, {
            width:80,
            title: '敏感词',
            dataIndex: 'sensitive_words',
            key: 'sensitive_words',
            render: (words,record) => {
                return <span style={{ color: '#f44336' }}>{words}</span>;

            }
        }
            , {
                width:100,
                title: '状态',
                dataIndex: 'status',
                key: 'status',
                render: (status,record) => {
                    if (status === 0){
                        return <span style={{ color: '#607d8b' }}>待审核</span>
                    }else if (status === 1){
                        return <span style={{ color: '#4caf50' }}>审核通过</span>
                    }else{
                        return <span style={{ color: '#f44336' }}>拒审</span>
                    }

                }
            },{
                width:150,
                title: '操作',
                dataIndex: 'action',
                key: 'action',
                render: (text, record) => {
                    return (
                        <div className={"action-list"}>

                <span   onClick={() => {
                    this.props.dispatch({
                        type: 'themecomment/checkComment',
                        data: { comment_id: record.comment_id,status :1 }
                    })
                }}>
                <a href="javascript:;">审核通过</a>
                        </span>


                            <span  onClick={() => {
                                this.props.dispatch({
                                    type: 'themecomment/checkComment',
                                    data: { comment_id: record.comment_id,status :2 }
                                })
                            }}>
                    <a href="javascript:;">拒审</a>
                        </span>

                            {record.pid == 0 ?
                                <span  onClick={() => {
                                    this.props.dispatch({
                                        type: 'themecomment/showModal',
                                        payload: {
                                            information_id: record.information_id,
                                            comment_id:record.comment_id
                                        },
                                    })

                                }}>
                    <a href="javascript:;">回复详情</a>
                        </span>
                                : ''}

                            <Popconfirm placement="leftTop" title='确定删除？'  icon={null}
                                        onConfirm={()=>this.props.dispatch({
                                            type: 'themecomment/deleteComment',
                                            data: { comment_id: record.comment_id }
                                        })} okText="确定" cancelText="取消">
                        <span>
                        <a href="javascript:;">删除</a>
                        </span>
                            </Popconfirm>


                        </div>
                    )


                },

            }];

        const { getFieldDecorator } = this.props.form;
        const { dataSource, pagination } = this.props.themecomment;
        const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);

        const total = pagination.total ? pagination.total : '';


        const selectedRowKeys = this.props.themecomment.selectedRowKeys;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        return (
            <section className="Comment" >
                <header className="header">
                    评论管理
                </header>
                <div className="content">
                    <div className="main">
                        <div>
                            <Form layout="inline" onSubmit={this.handleSubmit}>
                                <FormItem label='时间' >
                                    {getFieldDecorator('time')(
                                        <RangePicker style={{width:"200px"}}/>
                                    )}
                                </FormItem>

                                <FormItem label="文章标题">
                                    {getFieldDecorator('information_title', {
                                        initialValue: ''
                                    })(
                                        <Input placeholder="输入标题" style={{width:"130px"}}/>
                                    )}
                                </FormItem>
                                <FormItem label="评论内容">
                                    {getFieldDecorator('comment_content', {
                                        initialValue: ''
                                    })(
                                        <Input placeholder="输入内容" style={{width:"100px"}}/>
                                    )}
                                </FormItem>
                                <FormItem label='专题'>
                                    {getFieldDecorator('theme_id')(
                                        <Select
                                            showSearch
                                            placeholder={this.props.placeholder}
                                            style={this.props.style}
                                            defaultActiveFirstOption={false}
                                            showArrow={false}
                                            filterOption={false}
                                            onSearch={this.handleSearch}
                                            onChange={this.handleChange}
                                            notFoundContent={null}
                                            style={{width:"110px"}}
                                        >
                                            {options}
                                        </Select>

                                    )}

                                </FormItem>
                                <FormItem label='状态'>
                                    {getFieldDecorator('status')(
                                        <Select style={{width:"100px"}}>

                                            <Option value="0">待审核</Option>
                                            <Option value="1">审核通过</Option>
                                            <Option value="2">拒审</Option>
                                        </Select>
                                    )}
                                </FormItem>


                                <FormItem>
                                    <Button
                                        type="primary"
                                        style={{
                                            marginRight: '20px'
                                        }}
                                        onClick={this.search}
                                    >搜索</Button>
                                    <Button
                                        onClick={() => {
                                            this.props.form.resetFields();
                                            this.search()
                                        }}
                                    >清除</Button>
                                </FormItem>

                            </Form>
                        </div>
                        <div className='btn_group' style={{margin:"10px"}}>
                            <Button  style={{marginRight:"15px"}} type="defualt" disabled={selectedRowKeys.length > 0 ? false : true} onClick={() => {
                                let ids = this.props.themecomment.selectedPlateIds;
                                this.props.dispatch({
                                    type: 'themecomment/checkComment',
                                    data: { comment_id: ids.join(','),status :1 }
                                });
                                this.props.dispatch({ type: 'themecomment/updateMoreDeal', data: [] });

                            }}>
                                <Icon type="check" theme="outlined" />审核通过
                            </Button>

                            <Button type="defualt" disabled={selectedRowKeys.length > 0 ? false : true} onClick={() => {
                                let ids = this.props.themecomment.selectedPlateIds;
                                this.props.dispatch({
                                    type: 'themecomment/checkComment',
                                    data: { comment_id: ids.join(','),status :2 }
                                });
                                this.props.dispatch({ type: 'themecomment/updateMoreDeal', data: [] });

                            }}>
                                <Icon type="check" theme="outlined" />拒审
                            </Button>
                        </div>
                        <Table
                            dataSource={dataSource}
                            columns={columns}
                            onChange={this.handleTableChange}
                            // pagination={{
                            //     current: pagination.current,
                            //     pageSize: pagination.pageSize,
                            //     total: pagination.total,
                            //     showTotal: (total) => {  //设置显示一共几条数据
                            //         return `共有${total}数据`
                            //     }
                            //
                            // }}
                            rowSelection={rowSelection}
                            // loading={this.props.comment.loading}

                            style={{ marginTop: '10px' }}
                            pagination={{
                                total: total, //数据总数量
                                size: 'small',
                                showQuickJumper: true,
                                current: pagination.current ? pagination.current : 1,
                                pageSize: pagination.page_size,  //显示几条一页
                                defaultPageSize: 10, //默认显示几条一页
                                showSizeChanger: true,  //是否显示可以设置几条一页的选项
                                onShowSizeChange: (current, size) => {

                                    // if(size >= videoData.total){
                                    //     index = 1;
                                    // }
                                    let p = { ...pagination, index: current, page_size: size };
                                    this.props.dispatch({
                                        type: 'comment/getAllComment',
                                        data: p
                                    })
                                },
                                pageSizeOptions: ['10', '25', '50', '75', '100'],
                                style: { marginRight: '50px' },
                                showTotal: (total) => {  //设置显示一共几条数据
                                    return `共有${total}数据`
                                },

                                onChange: (page,pageSize) => {



                                    this.props.dispatch({ type: 'comment/updateMoreDeal', data: [] });
                                    this.props.dispatch({
                                        type: 'comment/setSelectedPlateIds',
                                        data: {
                                            ids: [],
                                            list: []
                                        }
                                    })
                                    let p = { ...pagination, index: page, page_size: pageSize };
                                    this.props.dispatch({
                                        type: 'comment/getAllComment',
                                        data: p
                                    })


                                }
                            }}
                        />
                    </div>
                </div>
                <CommentModal />
            </section>
        )
    }
}
